<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('发票申请')">

</head>

<body>

<div th:replace="head :: header"></div>

<div class="user_container clearfix">

    <!-- 主体内容 -->
    <div class="user_container clearfix">

        <div th:replace="content/personal/left :: body"></div>

        <!-- 右侧内容 -->
        <div id="app">

            <div class="right_boxwrap">
                <div class="user_right_box">
                    <div class="user_right_box_title">
                        <div class="user_right_box_title_l">
                            <em></em>
                            <h3>发票申请</h3>
                        </div>
                    </div>

                    <div class="middle_box" style="margin-bottom: 0;">
                        <form name="receiptForm" th:action="@{'/personal/receipt/apply/' + ${order.id}}" method="post">
                            <div class="invoice_content">

                                <div class="invoice_table my_invoice_table" style="padding-bottom: 30px;">
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <th>发票类型：</th>
                                            <td>
                                                <div class="text" style="margin-top: 8px;">
                                                    <input type="hidden" name="type" v-model="form.type">
                                                    <el-select v-model="form.type" value-key="value" placeholder="请选择">
                                                        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                                    </el-select>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>发票抬头：</th>
                                            <td class="middle_box_con">
                                                <div class="sex table" style="margin:10px 0;">
                                                    <label class="geren_dx" style="margin-right: 58px;">
                                                        <input name="title" type="radio" value="1" v-model="form.title"/>
                                                        <span style="display: inline-block;margin-left: 30px;">个人</span>
                                                    </label>
                                                    <label class="gongsi_dx">
                                                        <input name="title" type="radio" value="2" v-model="form.title"/>
                                                        <span style="display: inline-block;margin-left: 30px;">单位</span>
                                                    </label>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>发票内容：</th>
                                            <td>
                                                <div class="text">
                                                    <input type="text" name="content" v-model="form.content" placeholder="发票内容"/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="invoice_gs" v-show="form.title == 2">
                                            <th>公司名称：</th>
                                            <td>
                                                <div class="text">
                                                    <input type="text" name="unitName" v-model="form.unitName" placeholder="公司名称"/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="invoice_gs" v-show="form.title == 2">
                                            <th>发票税号：</th>
                                            <td>
                                                <div class="text">
                                                    <input type="text" name="dutyNo" v-model="form.dutyNo" placeholder="发票税号"/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="invoice_gr" v-show="form.type == 2">
                                            <th>收票邮箱：</th>
                                            <td>
                                                <div class="text">
                                                    <input type="text" name="contactEmail" v-model="form.contactEmail" placeholder="接收发票邮箱"/>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th valign="top" style="padding-top: 10px;">收票人信息：</th>
                                            <td>
                                                <div class="text text_sp clearfix" style="margin-bottom: 12px;">
                                                    <input style="margin-right: 16px;" type="text" name="receiveName" v-model="form.receiveName" placeholder="收票人姓名"/>
                                                    <input type="text" name="contactPhone" v-model="form.contactPhone" placeholder="联系电话"/>
                                                </div>
                                                <div class="text" style="margin-bottom: 12px;" v-show="form.type == 1">
                                                    <input type="hidden" name="postAddress" v-model="form.postAddress">
                                                    <el-cascader placeholder="选择城市" expand-trigger="hover" :options="city" v-model="form.postAddress"> </el-cascader>
                                                </div>
                                                <div class="text" style="margin-bottom: 8px;" v-show="form.type == 1">
                                                    <textarea name="postStreet" v-model="form.postStreet" rows="" cols="" placeholder="填写街道地址"></textarea>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th valign="top">发票金额：</th>
                                            <td>
                                                <div class="text" th:text="${'￥' + #numbers.formatDecimal(order.totalPrice,1,2) + '元'}"></div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                            <p style="margin: 15px 32px 0; color: red;" th:text="${error}"></p>
                            <p style="margin: 15px 32px 0; color: #a0a0a0;">注意：发票默认顺丰到付！</p>
                            <div class="invoice-bottom">
                                <input type="button" class="invoice-bottom-btn" value="提交" @click="submit"/>
                                <a href="javascript: window.history.back(-1)" class="invoice-bottom-btn" style="margin-right: 0; background: #a0a0a0;">取消</a>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>
<div th:replace="foot :: body"></div>

</body>

<script type="text/javascript" charset="utf-8" th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}"></script>

<script th:inline="javascript">
    var areas = [[${areas}]];
    var areaData = [];
    for (var i in areas) {
        areaData.push({
            label: areas[i].name,
            value: areas[i].id
        })
    }


    var v = new Vue({
        el: '#app',
        data: function () {
            return {

                form: {
                    type: 1,
                    title: 1,
                    content: '短视频拍摄',
                    unitName: '',
                    dutyNo: '',
                    contactEmail: null,
                    receiveName: '',
                    contactPhone: '',
                    postAddress: null,
                    postStreet: null,
                },

                types: [{
                    value: 1,
                    label: '纸质发票'
                }, {
                    value: 2,
                    label: '电子发票'
                }],

                city: areaData,
            }
        },

        methods: {
            submit: function () {
                if (!$.trim(this.form.type)) {
                    ELEMENT.Message.error('请选择发票类型');
                    return false;
                }

                if (!$.trim(this.form.title)) {
                    ELEMENT.Message.error('请选择发票抬头类型');
                    return false;
                }

                if (!$.trim(this.form.content)) {
                    ELEMENT.Message.error('请输入发票内容');
                    return false;
                }

                // 单位
                if (this.form.title == 2) {
                    if (!$.trim(this.form.unitName)) {
                        ELEMENT.Message.error('请输入抬头名称');
                        return false;
                    }

                    if (!$.trim(this.form.dutyNo)) {
                        ELEMENT.Message.error('请输入税号');
                        return false;
                    }
                }

                // 如果为电子发票
                if (this.form.type == 2) {
                    if (!$.trim(this.form.contactEmail)) {
                        ELEMENT.Message.error('请输入电子发票接收邮箱');
                        return false;
                    }
                }
                // 如果纸质发票
                else if (this.form.type == 1) {
                    if (!$.trim(this.form.postAddress)) {
                        ELEMENT.Message.error('请选择城市');
                        return false;
                    }

                    if (!$.trim(this.form.postStreet)) {
                        ELEMENT.Message.error('请输入街道地址');
                        return false;
                    }
                }

                if (!$.trim(this.form.receiveName)) {
                    ELEMENT.Message.error('请输入收票人姓名');
                    return false;
                }

                if (!($.trim(this.form.contactPhone) && Pattern.CHINA_MOBILE.test(this.form.contactPhone))) {
                    ELEMENT.Message.error('请输入正确的联系电话');
                    return false;
                }

                window.receiptForm.submit();
            }
        }
    })

    $(function () {
        activeLeft('receipt-apply');
    })
</script>

</html>